<template>
  <div class="board-container">
    <div class="board-header">
        <div class="header-top">
            <h2>{{year}}年{{month}}月商品销量排行榜</h2>
            <img src="@/assets/rank.png"/>
        </div>
        <div class="header-bottom">
            <input type="month" v-model="time"/>
        </div>
    </div>
    <table class="table ">
      <thead>
        <tr>
          <th scope="col">NO.</th>
          <th scope="col">
            商品名称
            </th>
          <th scope="col">销量</th>
          <th scope="col">统计年份</th>
          <th scope="col">统计月份</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in rankList" :key="index">
          <th scope="row">{{index+1}}</th>
          <td>{{item.goodName}}</td>
          <td>{{item.saleVolume}}</td>
          <td>{{ item.goodName!==undefined?year:'' }}</td>
          <td>{{ item.goodName!==undefined?month:''}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
    watch:{
        time(){
            let arr = this.time.split('-')
            this.year = arr[0]
            this.month = arr[1]
            this.month = this.format(this.month)
            this.getNewList(this.year,this.month)
        }
    },
    data(){
        return {
            time:'',
            year:'',
            month:'',
            rankList:[]
        }
    },
    methods:{
        format(time){
            while(time[0]==='0'){
                time = time.substring(1)
            }
            return time
        },
        async getNewList(year,month){
          let {data:res} = await this.$http.get(`/getGoodRank/${year}/${month}`)
          if(res.length>10){
            res = res.slice(0,10)
          }else if(res.length){
            while(res.length<10){
              res.push({})
            }
          }
          this.rankList = res
        }
    },
    created(){
      let date = new Date()
      let month = date.getMonth()+1
      if(month<10)
        month = '0'+month
      this.time = date.getFullYear()+"-"+month
    }
}
</script>

<style lang="less">
    .board-container{
        width: 95%;
        height: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .board-header{
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            position: relative;
            display: flex;
            background-color: #3ca2a2;
            border-radius: 15px;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            .header-top{
                display: flex;
                align-items: center;
                h2{
                  color: #ffffff;
                  font-weight: bold;
                  margin: 0px;
                }
                img{
                    width: 50px;
                }
            }
            .header-bottom{
                width: 100%;
                display: flex;
                justify-content:start;
                input{
                    background-color: #2f9090;
                    border: 0px solid #ffffff;
                    box-sizing: border-box;
                    color: #ffffff;
                    padding: 5px;
                    border-radius: 15px;
                }
            }
        }
        .board-header::after{
            display: block;
            background-color: #3ca2a2;
            width: 100%;
            height: 10px;
            position:absolute;
            bottom: 0px;
            content: '';
            border-bottom: 1px solid #ffffff;
        }
        thead{
            background-color: #3ca2a2;
            color: #ffffff;
            
        }
        .table{
          background-color: #ffffff;
          tbody{
            tr th{
              color: #ffffff;
              background-color: #2f9090;
            }
          }
        }
        .table th:nth-child(1){
            text-align: center;
        }
    }
</style>